<script setup>
// 导入组件
import UserdataItems from '../components/Management/UserdataItems.vue'
import WaittinguserItems from '../components/Management/WaittinguserItems.vue'
import NewsItemsPageforManagement from './NewsItemsPageforManagement.vue'
import Admindata from '../components/Management/Admindata.vue'
import QuestionPageForManagement from './QuestionPageForManagement.vue'
// import EntryManagement from '../components/Management/EntryManagement.vue'
// import SurveyManagement from '../components/Management/SurveyManagement.vue'
import element_plus from '@/assets/images/element-plus-logo.svg';
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from "@element-plus/icons-vue";

// 定义处理菜单打开的函数
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath);
};

// 定义处理菜单关闭的函数
const handleClose = (key, keyPath) => {
    console.log(key, keyPath);
};



// 当前组件状态
const currentComponent = ref(Admindata)

// 定义菜单选择处理函数
const handleSelect = (key) => {
    switch (key) {
        case '1-1':
            currentComponent.value = Admindata
            break
        case '1-2':
            currentComponent.value = WaittinguserItems
            break
        case '1-3':
            currentComponent.value = UserdataItems
            break
        case '2':
            currentComponent.value = NewsItemsPageforManagement
            break
        case '3':
            currentComponent.value = QuestionPageForManagement
            break
        default:
            currentComponent.value = UserdataItems
    }
}
</script>
<template>
    <el-container>
        <el-header>
            <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
                <el-menu-item @click="goToElement_plus()">
                    <img style="width: 100px" :src="element_plus" alt="Element logo" />
                </el-menu-item>

                <div class="flex-grow" />
                <el-menu-item>
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    个人空间
                </el-menu-item>
            </el-menu>
        </el-header>

        <el-row class="tac">
            <el-col :span="4">
                <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    @select="handleSelect">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <Location />
                            </el-icon>
                            <span>账号管理</span>
                        </template>
                        <el-menu-item index="1-1">管理员账号</el-menu-item>
                        <el-menu-item index="1-2">待验证用户</el-menu-item>
                        <el-menu-item index="1-3">用户账号</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="2">
                        <el-icon>
                            <IconMenu />
                        </el-icon>
                        <span>词条管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>问卷管理</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="20">
                <component :is="currentComponent" />
                <!-- <UserdataItems></UserdataItems> -->
            </el-col>
        </el-row>
    </el-container>
</template>

<script>
export default {
    methods: {
        goToElement_plus() {
            window.location.href = 'https://element-plus.org/zh-CN/';
        }
    }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
<style scoped>
.flex-grow {
  flex-grow: 1;
}
.element-center {
  display: flex;
  justify-content: center;
}
</style>